<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>

<body>
<div id="app">


    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group>
                        <template slot="title">博客分类管理</template>
                        <el-menu-item index="2-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="2-3" @click="_findAll">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>


                <el-dialog
                        title="新增博客"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="标题">
                            <el-input v-model="form.title" placeholder="标题不能为空"></el-input>
                        </el-form-item>
                        <el-form-item label="分类">
                            <el-select v-model="form.categoryId" placeholder="请选择分类">
                                <el-option
                                        v-for="item in categories"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryId"
                                >
                                </el-option>

                            </el-select>
                        </el-form-item>

                        <el-form-item label="作者">
                            <el-input v-model="form.author" placeholder="作者10字以内，不可修改"></el-input>
                        </el-form-item>

                        <el-form-item label="内容">
                            <el-input type="textarea" v-model="form.content" placeholder="内容长度不限，不能为空"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
                </el-dialog>

                <!--修改-->
                <el-dialog
                        title="修改博客"
                        :visible.sync="dialogVisible2"
                        width="30%"
                >
                    <el-form>
                        <el-form-item label="分类名称">
                            <el-input placeholder="分类名称不能超过20个字"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
                </el-dialog>
                <el-row>
                    <el-button type="success" @click="openForm">新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="blogId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="author"
                            label="作者"
                            width="180">
                    </el-table-column>

                    <el-table-column label="操作">

                        <!--                        修改 删除按钮-->
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="edit(scope.row.blogId)">
                            </el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="del(scope.row.blogId)">
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>

</body>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/blog.js"></script>
<script src="api/category.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                dialogVisible2: false,
                categories: [],
                form: {
                    blogId: null,
                    title: '',
                    categoryId: '',
                    content: '',
                    author: ''
                }
            }
        },
        // mounted 安装直接运行
        mounted() {
            this._findAll();

        },

        methods: {
            openForm() {
                this.dialogVisible = true
                //0.发起请求获取所有的分类
                this._getCategories()
                this.form={};
            },
            _findAll() {
                getAllBlog().then(res => {

                    console.log(res)
                    //如果请求成功数据更新一下
                    if (res.data.flag) {
                        //拿后端返回的数据来更新上面的tableData
                        this.tableData = res.data.data
                    }
                })
            },

            add() {


                if (this.form.blogId != null) {
                    this.myUpdate()
                }

                //1.发起请求
                addBlog(this.form).then(res => {
                    //2.处理返回
                    console.log(res)
                    if (res.data.flag) {
                        //3.弹窗
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        //4.刷新页面
                        this._findAll()
                        //5.表单关闭
                        this.dialogVisible = false
                        //6.清空form
                        // this.form = {}
                    }
                })
                this._findAll()
            },
            edit(id) {

                // console.log(this.form.categoryId);
                //1.打开窗体
                this.dialogVisible = true
                //2.
                //请求所有的分类，用来填充分类下拉框
                this._getCategories()
                //请求博客数据，填充编辑页面
                this._findBlogById(id)

                console.log( this.categories)

            },
            myUpdate() {
                updateBlog(this.form).then(res => {
                    //todo 这里有一些判断逻辑
                    console.log(res)
                    //刷新列表
                    this._findAll()
                    //关窗口
                    this.dialogVisible = false
                })
                //清理表单
                // this.form = {}
            },
            del(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                    deleteBlog(id).then(res => {
                        if (res.data.flag) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!',

                            });
                        }
                        console.log(res)
                        //刷新页面
                        this._findAll()

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            _findBlogById(id) {
                findBlogById(id).then(res => {
                    if (res.data.flag) {
                        //绑定数据
                        this.form = res.data.data
                        console.log(res.data.data)
                    }
                    console.log(res)
                })
                //显示弹窗
                this.dialogVisible = true


            },
            _getCategories() {
                getAllCategories().then(res => {
                    console.log(res)
                    if (res.data.flag) {
                        //拿后端返回的数据来更新上面的categories
                        this.categories = res.data.data
                        // console.log(res.data.data)
                    }
                })
            }
        }

    })
</script>

</html>